<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
	<head>
		<meta charset="UTF-8">
		<meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no, shrink-to-fit=no" name="viewport">
		<title>用户后台管理</title>

		<link rel="stylesheet" href="u-admin/dist/modules/bootstrap/css/bootstrap.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/ionicons/css/ionicons.min.css">
		<link rel="stylesheet" href="u-admin/dist/modules/fontawesome/web-fonts-with-css/css/fontawesome-all.min.css">

		<link rel="stylesheet" href="u-admin/dist/modules/summernote/summernote-lite.css">
		<link rel="stylesheet" href="u-admin/dist/modules/flag-icon-css/css/flag-icon.min.css">
		<link rel="stylesheet" href="u-admin/dist/css/demo.css">
		<link rel="stylesheet" href="u-admin/dist/css/style.css">
		<link rel="stylesheet" href="css/common.css"/>
		<style>
			.text{
				margin-left: 1em;
				font-size: 16px;
				font-weight: 300
			}
		</style>
	</head>

	<body>
	<div id="app">
		<div class="main-wrapper">
			<div class="navbar-bg"></div>


				<div th:replace="commons/u-admin-bar::#navbar(currUri='user-info')"></div>
				<div th:replace="commons/u-admin-bar::#sidebar(currUri='user-info')"></div>
				<div class="main-content">
					<section class="section">
						<h1 class="section-header">
							<div><i class="icon ion ion-android-person"></i> 个人信息</div>
						</h1>
						<div class="row">
							<div class="col-12 ">
								<div class="card">
									<div class="card-header">
										<div class="float-right">
											<a href="update-user-info"><i class="icon ion-clipboard"></i> 修改资料</a>
										</div>
										<h5>完善信息让更多人认识你<span style="color: red;font-size: 16px" th:if="${error !=null}" th:text="${error}"></span> </h5>
									</div>
									<div class="row">
										<div class="col-4"></div>
										<div class="card-body box col-4">
											<ul class="list-unstyled list-unstyled-border">
												<li class="media">
													<img class="mr-3 rounded-circle" style="width: 50px;height: 50px" th:src="${session.loginUser.imagePath}"  alt="avatar">
													&emsp;
													<div class="media-body" style="padding-top: 20px">
														<div class="media-title"><a href="javascript:;" class="rollIn">修改头像</a> | <a style="color: red" href="javascript:;" class="bounceIn">修改密码</a><br><span id="imgUploadInfo"></span></div>
													</div>
												</li>
												<li>
												<i class="icon ion-android-happy"></i> 昵称：<span class="text"> [[${session.loginUser.userName}]]</span>
												</li>
												<li style="margin-top: -15px">
												<i class="icon ion-email"></i> 邮箱：<span class="text"> [[${session.loginUser.email}]]</span>
												</li>
												<li style="margin-top: -15px">
												<i class="icon ion-chatboxes"></i> 微信：<span class="text"> [[${session.loginUser.wechat}]]</span>
												</li>
												<li style="margin-top: -15px">
												<i class="icon ion-transgender"></i> 性别：<span class="text"> [[${session.loginUser.sex==0?"男":"女"}]]</span>
												</li>
												<li style="margin-top: -15px" th:if="${session.loginUser.bornDate != null}">
												<i class="icon ion-pound"></i> 年龄： <span class="text" th:text="${#dates.year(#dates.createNow()) - #dates.year(session.loginUser.bornDate)}"></span>
												</li>
												<li style="margin-top: -15px">
												<i class="icon ion-calendar"></i> 生日：<span class="text"> [[${#dates.format(session.loginUser.bornDate,'MM-dd')}]]</span>
												</li>
												<li style="margin-top: -15px">
												<i class="icon ion-location"></i> 地区：<span class="text"> [[${session.loginUser.location}]]</span>
												</li>
												<li style="margin-top: -15px">
												<i class="icon ion-person"></i> 职业：<span class="text"> [[${session.loginUser.career}]]</span>
												</li>
												<li style="margin-top: -15px">
												<i class="icon ion-pound"></i> 介绍：<span class="text"> [[${session.loginUser.info}]]</span>
												</li>
												<li style="margin-top: -15px">
												<i class="icon ion-clock"></i> 注册时间：<span class="text"> [[${#dates.format(session.loginUser.registerTime,'yyyy-MM-dd HH:mm')}]]</span>
												</li>

											</ul>
										</div>
										<div class="col-4"></div>
									</div>
								</div>
							</div>

								<div id="dialogBg"></div>
								<div id="dialog" class="animated">
									<div class="dialogTop">
										<a href="javascript:;" class="claseDialogBtn">关闭</a>
									</div>
									<form action="" method="post" id="editForm">
										<ul class="editInfos" id="input-ul">
											<li><label><font color='#ff0000'>* </font>原密码：<input id='old_pwd' type='password' name='oldPwd' required='required' class='ipt' /></label></li>
											<li><label><font color='#ff0000'>* </font>新密码：<input id='new_pwd' type='password' name='newPwd' required='required' class='ipt' /></label></li>
											<li><label><font color='#ff0000'>* </font>新密码：<input id='new_repeat' type='password' name='' required='required' class='ipt' /></label></li>
											<li><input type='button' onclick='checkPassword()' value='确认提交' class='submitBtn' /></li>
										</ul>
									</form>
								</div>
							</div>

					</section>
				</div>
				<div th:replace="commons/u-admin-bar::#footer"></div>
			</div>
		</div>
		<script src="http://www.jq22.com/jquery/jquery-1.10.2.js"></script>
		<script type="text/javascript">
		var w,h,className;
		function getSrceenWH(){
			w = $(window).width();
			h = $(window).height();
			$('#dialogBg').width(w).height(h);
		}

		window.onresize = function(){
			getSrceenWH();
		}
		$(window).resize();

		$(function(){
			getSrceenWH();

			//显示弹框
			$('.box a').click(function(){
				if(this.innerHTML === "修改头像"){
					$('#input-ul').html('<input type="file" name="file" id="fileName" onchange="checkSubmit()" accept=".jpeg, .png, .jpg" >');
				}
				className = $(this).attr('class');
				$('#dialogBg').fadeIn(300);
				$('#dialog').removeAttr('class').addClass('animated '+className+'').fadeIn();
			});

			//关闭弹窗
			$('.claseDialogBtn').click(function(){
				$('#dialogBg').fadeOut(300,function(){
					$('#dialog').addClass('bounceOutUp').fadeOut();
				});
			});
		});
		function checkPassword() {
			var old_pwd = $('#old_pwd').val().trim();
			var new1 = $('#new_pwd').val().trim();
			var new2 = $('#new_repeat').val().trim();

			if (old_pwd === ''){
				alert("请输入原始密码！");
				return false;
			}
			if (old_pwd == new1){
				alert("原密码不可以与新密码一致！");
				return false;
			}
			if (new1 === ''||new2===''||new1!=new2){
				alert("两次密码输入的不一致！");
				return false;
			}
			$('#editForm').attr('action','updatePassword');
			$('#editForm').submit();
		}
	</script>
		<script src="u-admin/dist/modules/jquery.min.js"></script>
		<script src="u-admin/dist/modules/popper.js"></script>
		<script src="u-admin/dist/modules/tooltip.js"></script>
		<script src="u-admin/dist/modules/bootstrap/js/bootstrap.min.js"></script>
		<script src="u-admin/dist/modules/nicescroll/jquery.nicescroll.min.js"></script>
		<script src="u-admin/dist/modules/scroll-up-bar/dist/scroll-up-bar.min.js"></script>
		<script src="u-admin/dist/js/sa-functions.js"></script>

		<script src="u-admin/dist/modules/chart.min.js"></script>
		<script src="u-admin/dist/modules/summernote/summernote-lite.js"></script>
		
		<script src="u-admin/dist/js/scripts.js"></script>
		<script src="u-admin/dist/js/custom.js"></script>
		<script src="u-admin/dist/js/demo.js"></script>
		<script src="js/userInfo.js"></script>
		<script src="js/fileUpload.js"></script>
	</body>
</html>
